<template>
  <div class="poster-main">
    <el-dialog v-if="dialogVisible" :title="$t('上传素材')" :visible.sync="dialogVisible" width="30%"
      :destroy-on-close="true">
      <el-form ref="ruleForm" :model="cover" :rules="rules" label-width="100px" class="demo-ruleForm">
        <el-form-item :label="$t('名称')" prop="name">
          <el-input v-model="cover.name" />
        </el-form-item>
        <el-form-item :label="$t('素材')" prop="source">
          <el-upload class="upload-demo" :headers="myHeaders" :action="$store.getters.updateURL + 'material/upload'"
            :on-success="handleSuccess" :limit="1">
            <el-button size="small" type="primary">
              {{ $t('点击上传') }}
            </el-button>
          </el-upload>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="uploadCover('ruleForm')">
            {{ $t('保存') }}
          </el-button>
          <el-button @click="resetForm('ruleForm')">{{ $t('重置') }}</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
    <el-header>
      <el-button type="text" class="upload-btn iconfont icon-shangchuansucai" @click="showUpload">
        {{ $t('上传素材') }}
      </el-button>
      <div class="operation-buttons">
        <div class="center-l">
          <el-button type="text" class="iconfont icon-shanchu" @click="delItem">
            {{ $t('删除') }}
          </el-button>
          <el-button type="text" class="iconfont icon-chexiao" @click="back">
            {{ $t('撤销') }}
          </el-button>
          <el-button type="text" class="iconfont icon-yulan" @click="preview">
            {{ $t('预览') }}
          </el-button>
          <el-button type="text" class="iconfont icon-baocun" @click="save">
            {{ $t('保存') }}
          </el-button>
          <el-button type="text" class="iconfont icon-xiazai" @click="download">
            {{ $t('下载') }}
          </el-button>
        </div>
        <el-button type="primary" plain @click="newPoster">
          {{ $t('新建文件') }}
        </el-button>
      </div>
    </el-header>
    <div class="content-box">
      <div class="menu">
        <el-tabs v-model="source_tab" @tab-click="handleTabClick">
          <el-tab-pane :label="$t('海报')" name="data">
            <div class="list-wrapper">
              <div class="list">
                <div v-for="(item, index) in posterList" :key="index" class="free-poster" @click="diy(item.id)">
                  <div :title="item.name" class="free-poster-title">
                    {{ item.name }}
                  </div>
                  <div class="delPoster" @click.stop="delPoster(item.id)">
                    <i class="el-icon-delete" />
                  </div>
                  <div class="copyPoster" @click.stop="copyPoster(item.id)">
                    <i class="el-icon-copy-document" />
                  </div>
                  <img :src="item.preview" class="cover_img" />
                </div>
              </div>
            </div>
          </el-tab-pane>
          <el-tab-pane :label="$t('素材')" name="cover">
            <div class="list-wrapper">
              <div class="list">
                <div v-for="(item, index) in coverList" :key="index" class="free-poster" @click="coverDiy(item)">
                  <div :title="item.name" class="free-poster-title">
                    {{ item.name }}
                  </div>
                  <i class="el-icon-delete cover-del" @click="delCover(item.id)" />
                  <img :src="item.source" class="cover_img" />
                </div>
              </div>
            </div>
          </el-tab-pane>
          <el-tab-pane :label="$t('组件')" name="widget">
            <div class="list-wrapper">
              <div class="list-components">
                <div class="item" @click="addItem('text')">
                  <img src="@/assets/poster/word.svg" alt="" />
                  <div class="item-desc">
                    <h3>{{ $t('文字') }}</h3>
                    <p>{{ $t('点击创建') }}</p>
                  </div>
                </div>

                <div class="item" @click="addItem('image')">
                  <img src="@/assets/poster/img.svg" alt="" />
                  <div class="item-desc">
                    <h3>{{ $t('图片') }}</h3>
                    <p>{{ $t('点击创建') }}</p>
                  </div>
                </div>

                <div class="item" @click="addItem('qrcode')">
                  <img src="@/assets/poster/qrcode.svg" alt="" />
                  <div class="item-desc">
                    <h3>{{ $t('二维码') }}</h3>
                    <p>{{ $t('点击创建') }}</p>
                  </div>
                </div>
              </div>
            </div>
          </el-tab-pane>
        </el-tabs>
      </div>
      <div class="poster-view">
        <div class="poster-scroll">
          <div class="free-editor-wrapper" :style="wrapper_style">
            <div ref="poster" class="free-poster-bg" :style="bg_style">
              <VueDragResize v-for="(item, index) in formData.item" :key="item.uuid" :w="calcSize(item.w)"
                :h="calcSize(item.h)" :x="calcSize(item.x)" :y="calcSize(item.y)" :minw="10" :minh="10"
                :parent-limitation="true" :is-active="index === nowFormIndex" :parent-w="calcSize(formData.width)"
                :parent-h="calcSize(formData.height)" :style="{
                  zIndex: index,
                  textAlign: item.a ? item.a : '',
                  transform: `rotate(${item.rotate}deg)`
                }" @dragging="dragging" @resizing="resizing" @activated="onActivated(index)"
                @deactivated="onDeactivated(index)">
                <pre v-if="item.t === 'text'" :style="{
                  width: '100%',
                  height: '100%',
                  backgroundColor: item.bgColor,
                  'font-size': calcSize(item.s) + 'px',
                  'font-family': item.fn,
                  color: item.c,
                  'text-align': item.a,
                  //'white-space': item.warp ? 'break-spaces' : 'pre',
                  'line-height': 'calc(1em + 4px)',
                  'white-space': 'nowrap'
                }">
                    {{ item.v }}
                </pre>
                <img v-if="item.t === 'image'" :src="item.v" />
                <div class="qrcode-img" v-if="item.t === 'qrcode'" :id="'qrcode' + index" :ref="'qrcode' + index"
                  style="width: 100%; height: 100%" />
              </VueDragResize>
            </div>
          </div>
        </div>
        <div class="free-editor-bottom-bar">
          <i class="el-icon-remove" @click="changeSize(1)" />
          <span class="scale-num">{{ resize }}%</span>
          <i class="el-icon-circle-plus" @click="changeSize(2)" />
        </div>
      </div>

      <div class="free-poster-tools">
        <el-tabs v-model="setting_tab">
          <el-tab-pane :label="$t('海报设置')" name="base_setting">
            <BaseForm :formdata="formData" @baseUpdate="baseUpdate" />
          </el-tab-pane>
          <el-tab-pane :label="$t('组件设置')" name="widget_setting">
            <Widget :formdata="nowWidget" :index="nowFormIndex" @baseUpdate="baseUpdate" @changeColor="changeColor"
              @changeQrcode="changeQrcode" @changeLayer="changeLayer" @changeFont="changeFont" />
          </el-tab-pane>
        </el-tabs>
      </div>
    </div>
    <!-- 预览 -->
    <el-image-viewer v-if="previewImg" :on-close="closeViewer" :url-list="srcList" />
  </div>
</template>

<script>
import BaseForm from './BaseForm.vue'
import Widget from './Widget.vue'
import ElImageViewer from 'element-ui/packages/image/src/image-viewer'
import QRCode from 'qrcodejs2'
import materialApi from '@/api/material.js'
import posterApi from '@/api/poster.js'

export default {
  name: 'Designer',
  components: {
    BaseForm,
    Widget,
    ElImageViewer
  },
  data() {
    return {
      dialogVisible: false,
      previewImg: false,
      url: '',
      srcList: [],
      source_tab: 'data',
      setting_tab: 'base_setting',
      nowWidget: {},
      cover: {
        name: '',
        source: '',
        width: 0,
        height: 0,
        type: 'png'
      }, // 素材
      formData: {
        id: '',
        name: '',
        type: 'jpg',
        qulity: 80,
        size: 1,
        width: 750,
        height: 1333,
        activeName: 'img',
        color: '#fff',
        img_src: '',
        item: []
      },
      myHeaders: { Authorization: `Bearer ${this.$store.getters.token}` },
      // 基础素材
      material: {
        text: {
          a: 'left', // 对齐方式
          warp: false, // 是否开启换行
          t: 'text', // 类型
          c: '#000', // 颜色
          bgc: '', // 背景色
          h: 70, // 高度
          w: 200, // 宽度
          x: 100, // x坐标
          y: 100, // y坐标
          fn: 'ali-Regular', // 字体
          s: 68, // 字体大小
          name: '文字', // 名称
          v: '内容', // 内容
          rm: '备注', // 备注
          uuid: '', // 唯一标识
          rotate: 0
        },
        qrcode: {
          t: 'qrcode', // 类型
          c: '#000000', // 颜色
          h: 150, // 高度
          w: 150, // 宽度
          x: 250, // x坐标
          y: 400, // y坐标
          fn: '', // 字体
          bgc: '#ffffff', // 背景色
          name: '文字', // 名称
          v: 'https://www.huocms.com', // 内容
          rm: '备注', // 备注
          uuid: '', // 唯一标识
          rotate: 0
        },
        img: {
          t: 'image', // 类型
          h: 150, // 高度
          w: 450, // 宽度
          x: 100, // x坐标
          y: 100, // y坐标
          c: '#000000', // 颜色
          bgc: '#fff', // 背景色
          fn: '', // 字体
          name: '图片', // 名称
          v: 'https://www.huocms.com/static/home/images/logo.png', // 内容
          rm: '备注', // 备注
          uuid: '', // 唯一标识
          rotate: 0
        }
      },
      resize: 40, // 缩放比例
      wrapper_style: '',
      bg_style: '',
      // 素材列表
      coverList: [],
      // 可用的模板列表
      posterList: [],
      nowFormIndex: 0, // 当前操作的组件下标
      rules: {
        name: [{ required: true, message: this.$t('请输入名称') }],
        source: [{ required: true, message: this.$t('请上传素材文件') }]
      }
    }
  },
  watch: {
    resize() {
      this.setStyle()
    }
  },
  created() {
    this.setStyle()
    this.getPosterList()
  },
  methods: {
    // 新海报
    newPoster() {
      this.formData = {
        id: '',
        name: '',
        type: 'jpg',
        qulity: 80,
        size: 1,
        width: 750,
        height: 1333,
        activeName: 'img',
        color: '#fff',
        img_src: '',
        item: []
      }
      this.setting_tab = 'base_setting'
      this.nowFormIndex = ''
    },
    // 设置化画布样式
    setStyle() {
      const bgWidth = this.calcSize(this.formData.width, 1) + 'px'
      const bgHeight = this.calcSize(this.formData.height, 1) + 'px'
      this.wrapper_style = 'width:' + bgWidth + ';height:' + bgHeight
      this.bg_style =
        'width:' +
        bgWidth +
        ';height:' +
        bgHeight +
        ';background-size:' +
        bgWidth +
        ' ' +
        bgHeight +
        ';'

      if (this.formData.activeName === 'color') {
        this.bg_style += 'background-color:' + this.formData.color + ';'
      }

      if (this.formData.img_src && this.formData.activeName === 'img') {
        this.bg_style += 'background-image: url(' + this.formData.img_src + ');'
      }

      // 重新绘制 二维码
      this.formData.item.forEach((ele, index) => {
        if (ele.t === 'qrcode') {
          this.$nextTick(() => {
            this.qrcode(index, ele)
          })
        }
      })
    },
    uuid() {
      function S4() {
        return (((1 + Math.random()) * 0x10000) | 0).toString(16).substring(1)
      }
      return S4() + S4()
    },
    // 预览
    async preview() {
      console.log(this.formData)
      const res = await posterApi.preview(this.formData)
      if (res.code == 0) {
        this.previewImg = true
        this.url = res.data
        this.srcList[0] = res.data
      }
    },
    closeViewer() {
      this.previewImg = false
    },
    calcSize(num, type) {
      let result = ''
      if (type) {
        result = (num * (this.resize / 100)).toFixed(1)
      } else {
        result = parseInt(num * (this.resize / 100))
      }

      return result
    },
    // 下载
    async download() {
      const res = await posterApi.preview(this.formData)
      if (res.code == 0) {
        this.srcList[0] = res.data
      }
      if (this.srcList[0]) {
        window.open(this.srcList[0], '_target')
      }
    },
    // 加减尺寸
    changeSize(type) {
      if (type === 1) {
        if (this.resize <= 5) {
          return
        }

        if (this.resize > 30) {
          this.resize -= 10
        } else {
          this.resize -= 1
        }
      } else if (type === 2) {
        if (this.resize >= 300) {
          return
        }

        if (this.resize < 30) {
          this.resize += 1
        } else {
          this.resize += 10
        }
      }

      // 重新渲染 -- 解决组件 无法同时更新 x,y,w,h
      this.formData.item.forEach((ele, index) => {
        ele.uuid = this.uuid()
      })
    },
    // diy设计
    async diy(id) {
      if (id == this.formData.id) {
        return
      }

      this.formData.item = []
      this.setting_tab = 'base_setting'
      this.nowFormIndex = ''

      const res = await posterApi.edit({ id: id })

      // 基础信息
      this.formData = JSON.parse(res.data.design_content)
      this.formData.qulity = parseInt(this.formData.qulity)
      this.formData.id = res.data.id
      this.formData.size = parseInt(this.formData.size)

      this.formData.item.forEach((ele, index) => {
        if (ele.t === 'qrcode') {
          this.$nextTick(() => {
            this.qrcode(index, ele)
          })
        }
      })
    },
    qrcode(index, ele) {
      const dom = document.getElementById('qrcode' + index)
      dom.innerHTML = ''
      /* eslint-disable */
      let qrcode = new QRCode(dom, {
        text: encodeURI(ele.v),
        width: (ele.w * (this.resize / 100)).toFixed(1),
        height: (ele.h * (this.resize / 100)).toFixed(1),
        colorDark: ele.c,
        colorLight: ele.bgc,
        correctLevel: QRCode.CorrectLevel.H
      })
    },
    // 删除组件
    delItem() {
      this.formData.item.splice(this.nowFormIndex, 1)
    },
    // 更改二维码内容
    changeQrcode(data) {
      this.qrcode(data.index, data.item)
    },
    // 二维码变色
    changeColor() {
      this.qrcode(this.nowFormIndex, this.formData.item[this.nowFormIndex])
    },
    // 改变层级
    changeLayer(data) {
      let type = data.type
      let nowIndex = data.index
      let maxIndex = this.formData.item.length - 1
      let tempData = this.formData.item

      if (type == 'add') {
        //上移一层
        if (nowIndex + 1 >= tempData.length) {
          return
        }
        this.formData.item = []
        let temp = tempData[nowIndex]
        tempData[nowIndex] = tempData[nowIndex + 1]
        tempData[nowIndex + 1] = temp
        this.nowFormIndex = nowIndex + 1
      }
      if (type == 'sub') {
        //下移一层
        if (nowIndex <= 0) {
          return
        }
        this.formData.item = []
        let temp = tempData[nowIndex]
        tempData[nowIndex] = tempData[nowIndex - 1]
        tempData[nowIndex - 1] = temp
        this.nowFormIndex = nowIndex - 1
      }
      if (type == 'top') {
        if (nowIndex + 1 >= tempData.length) {
          return
        }
        //置顶
        this.formData.item = []
        let temp = tempData[nowIndex]
        tempData.splice(nowIndex, 1)
        tempData.push(temp)
        this.nowFormIndex = maxIndex
      }
      if (type == 'bottom') {
        //置底
        if (nowIndex <= 0) {
          return
        }
        this.formData.item = []
        let temp = tempData[nowIndex]
        tempData.splice(nowIndex, 1)
        tempData.splice(0, 0, temp)
        this.nowFormIndex = 0
      }
      this.nowWidget = tempData[this.nowFormIndex]
      this.formData.item = tempData
    },
    // 改变字体对齐方式
    changeFont(data) {
      let type = data.type
      let nowIndex = data.index
      this.formData.item[nowIndex].a = type
    },
    // 上传成功
    handleSuccess(res, file) {
      this.cover.source = res.data.url
      this.cover.width = res.data.width
      this.cover.height = res.data.height
      this.cover.type = res.data.type
    },
    // 改变尺寸
    resizing(newRect) {
      this.formData.item[this.nowFormIndex].x = parseInt(
        parseInt(newRect.left) / (this.resize / 100).toFixed(1)
      )

      this.formData.item[this.nowFormIndex].y = parseInt(
        parseInt(newRect.top) / (this.resize / 100).toFixed(1)
      )

      this.formData.item[this.nowFormIndex].w = parseInt(
        parseInt(newRect.width) / (this.resize / 100).toFixed(1)
      )
      this.formData.item[this.nowFormIndex].h = parseInt(
        parseInt(newRect.height) / (this.resize / 100).toFixed(1)
      )
      this.formData.item[this.nowFormIndex].s =
        this.formData.item[this.nowFormIndex].h

      // 重新绘制二维码
      if (this.formData.item[this.nowFormIndex].t === 'qrcode') {
        // this.qrcode(this.nowFormIndex, this.formData.item[this.nowFormIndex])
      }
    },
    // 拖动
    dragging(newRect) {
      this.formData.item[this.nowFormIndex].x = parseInt(
        parseInt(newRect.left) / (this.resize / 100).toFixed(1)
      )

      this.formData.item[this.nowFormIndex].y = parseInt(
        parseInt(newRect.top) / (this.resize / 100).toFixed(1)
      )
    },
    // 激活
    onActivated(index) {
      // console.log(this.formData.item, 'onActivated>>>>>>>>>')
      this.nowFormIndex = index
      if (this.formData.item[index].t === 'text') {
        this.setting_title = '文字'
      } else if (this.formData.item[index].t === 'image') {
        this.setting_title = '图片'
      } else if (this.formData.item[index].t === 'qrcode') {
        this.setting_title = '二维码'
      }

      this.nowWidget = this.formData.item[index]
      this.setting_tab = 'widget_setting'
    },
    // 取消
    onDeactivated(index) { },
    // 监听修改
    baseUpdate(data) {
      console.log()
      if (data.type === 'style') {
        this.formData = data.data
        this.setStyle()
      }
    },
    // 保存入库
    async save() {
      const res = await posterApi.add(this.formData)
      if (res.code == 0) {
        this.$message.success(res.msg)
        this.getPosterList()
        if (res.data > 0) {
          this.formData.id = res.data
        }
      }
    },
    async copyPoster(id) {
      const res = await posterApi.copy({ id: id })
      if (res.code == 0) {
        this.$message.success(res.msg)
        this.getPosterList()
      }
    },
    // 添加组件
    addItem(type) {
      if (type == 'text') {
        let item = JSON.parse(JSON.stringify(this.material.text))
        item.uuid = this.uuid()
        console.log(item, '--->')
        this.formData.item.push(item)
      } else if (type == 'image') {
        let item = JSON.parse(JSON.stringify(this.material.img))
        item.uuid = this.uuid()
        this.formData.item.push(item)

        console.log(item, 'itemitemitemitem')
      } else if (type == 'qrcode') {
        let item = JSON.parse(JSON.stringify(this.material.qrcode))
        item.uuid = this.uuid()
        let index = this.formData.item.length
        this.formData.item.push(item)

        this.$nextTick(() => {
          this.qrcode(index, item)
        })
      }
    },
    // 撤销
    back() {
      let length = this.formData.item.length
      if (length) {
        this.formData.item.pop()
      }
    },
    // 上传
    showUpload() {
      this.dialogVisible = true
    },
    // 切换菜单
    handleTabClick() {
      if (this.source_tab == 'cover') {
        this.getCoverList()
      } else if (this.source_tab == 'data') {
        this.getPosterList()
      }
    },
    // 获取海报列表
    async getPosterList() {
      this.posterList = []
      const res = await posterApi.list()
      if (res.code == 0) {
        this.posterList = res.data
      }
    },
    // 获取素材列表
    async getCoverList() {
      this.coverList = []
      let res = await materialApi.list()
      this.coverList = res.data
    },
    // 上传素材
    uploadCover(formName) {
      this.$refs[formName].validate(async valid => {
        if (valid) {
          let res = await materialApi.add(this.cover)
          if (res.code == 0) {
            this.$message.success(res.msg)
            this.dialogVisible = false
            if (this.source_tab == 'cover') {
              this.getCoverList()
            }
          }
        }
      })
    },
    // 素材
    coverDiy(item) {
      this.material.img.v = item.source
      this.addItem('image')
    },
    // 素材删除
    delCover(id) {
      this.$confirm(this.$t('您确定要删除该素材'), this.$t('提示'), {
        confirmButtonText: this.$t('确定'),
        cancelButtonText: this.$t('取消'),
        type: 'warning'
      })
        .then(async () => {
          let res = await materialApi.del({ id: id })
          if (res.code == 0) {
            this.$message.success(res.msg)
            this.getCoverList()
          }
        })
        .catch(() => { })
    },
    resetForm(formName) {
      this.$refs[formName].resetFields()
    },
    // 图片格式转换方法
    dataURLToBlob(dataurl) {
      let arr = dataurl.split(',')
      let mime = arr[0].match(/:(.*?);/)[1]
      let bstr = atob(arr[1])
      let n = bstr.length
      let u8arr = new Uint8Array(n)
      while (n--) {
        u8arr[n] = bstr.charCodeAt(n)
      }
      return new Blob([u8arr], { type: mime })
    },
    // 刪除海报
    async delPoster(id) {
      console.log('删除海报', id)
      this.$confirm(this.$t('您确定要删除该海报吗'), this.$t('提示'), {
        confirmButtonText: this.$t('确定'),
        cancelButtonText: this.$t('取消'),
        type: 'warning'
      })
        .then(async () => {
          if (this.formData.id == id) {
            this.formData.id = ''
          }
          const res = await posterApi.del({ id: id })
          if (res.code == 0) {
            this.$message.success(res.msg)
            this.getPosterList()
          }
        })
        .catch(() => { })
    }
  }
}
</script>

<style scoped lang="scss">
.poster-main {
  background-color: #fff;
  min-height: calc(100vh - 50px);
  height: 100%;
  display: flex;
  flex-direction: column;
}

.el-header {
  width: 100%;
  height: 56px;
  display: flex;
  align-items: center;
  box-shadow: inset 0px -1px 0px 0px #e5e6eb, inset 0px 1px 0px 0px #e5e6eb;
  padding: 0;

  .upload-btn {
    width: 260px;
    text-align: center;
  }

  .operation-buttons {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: calc(100% - 520px);

    .center-l {
      display: flex;
      align-items: center;

      .el-button--text {
        color: #4e5969;
      }
    }

    .el-button--primary.is-plain {
      border-color: transparent;
    }
  }
}

.content-box {
  width: 100%;
  height: 100%;
  display: flex;
  flex: 1;
}

.menu {
  height: 100%;
  width: 260px;

  ::v-deep {
    .el-tabs__nav-scroll {
      display: flex;
      justify-content: center;
    }

    .el-tabs__header {
      margin-bottom: 8px;
    }
  }
}

.grid-content {
  height: 100%;
  width: 100%;
}

::v-deep .content-container {
  overflow: hidden;
}

.content-container img {
  width: 100%;
  height: 100%;
}

::v-deep .qrcode-img img {
  width: 100%;
  height: 100%;
}

.poster-view {
  background-color: #eef2f8;
  flex: 1;
  overflow: auto;
  position: relative;
  min-height: calc(100vh - 110px);
  height: 100%;
}

.poster-view .poster-scroll {
  overflow: auto;
  position: relative;
  height: calc(100vh - 150px);
}

.list-wrapper {
  overflow-y: auto;
  height: 100%;
  padding: 0 8px;
}

.list {
  width: 100%;
  font-size: 0;
  column-count: 2;
  column-gap: 8px;
}

.list-components {
  .item-desc {
    margin-left: 12px;
  }
}

.free-poster {
  width: 100%;
  border-radius: 4px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  max-height: 200px;
  margin-right: 8px;
  margin-bottom: 8px;
}

.free-poster:hover .free-poster-title {
  display: block;
}

.free-poster:hover .delPoster {
  display: block;
}

.free-poster:hover .copyPoster {
  display: block;
}

.free-poster:hover .cover-del {
  display: block;
}

.free-poster-title {
  position: absolute;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 100%;
  padding: 0 5px;
  height: 22px;
  background-color: #2c3e50;
  color: #fff;
  font-size: 12px;
  line-height: 22px;
  display: none;
}

.delPoster {
  position: absolute;
  bottom: 0;
  right: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 22px;
  padding: 0 5px;
  height: 22px;
  background-color: #2c3e50;
  color: #fff;
  font-size: 12px;
  line-height: 22px;
  display: none;
}

.copyPoster {
  position: absolute;
  bottom: 0;
  left: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 22px;
  padding: 0 5px;
  height: 22px;
  background-color: #2c3e50;
  color: #fff;
  font-size: 12px;
  line-height: 22px;
  display: none;
}

.free-poster img {
  width: 100%;
  height: 100%;
}

.free-editor-wrapper {
  position: relative;
  margin: 0 auto;
  width: 360px;
  height: 640px;
  outline: none;
  box-sizing: initial;
  overflow: visible;
  padding: 70px;
}

.free-poster-bg {
  box-shadow: 1px 1px 15px rgb(0 0 0 / 20%);
  background-repeat: no-repeat;
  width: 360px;
  height: 640px;
  background-color: rgb(250, 251, 252);
  background-size: 360px 640px;
  position: relative;
}

.free-editor-bottom-bar {
  display: flex;
  position: absolute;
  bottom: 30px;
  right: 30px;
  z-index: 999;
  width: 120px;
  justify-content: center;
  box-shadow: 0 2px 8px 0 rgb(0 0 0 / 6%);
  height: 36px;
  background: #fff;
  border-radius: 4px;
  color: #333;
  line-height: 36px;
  font-size: 13px;
}

.free-editor-bottom-bar i {
  width: 36px;
  text-align: center;
  cursor: pointer;
  font-size: 24px;
  line-height: 37px;
}

.free-editor-bottom-bar .scale-num {
  display: block;
  flex-grow: 1;
  text-align: center;
}

.tools-title {
  height: 40px;
  line-height: 40px;
  text-align: center;
  border-bottom: 1px solid #c2c2c2;
}

.free-drag {
  position: absolute;
  z-index: 5;
  box-sizing: border-box;
  cursor: default;
}

.menu .el-tabs__header {
  margin-bottom: 0;
}

.el-tabs__content {
  height: 100%;
}

.el-tab-pane {
  height: 100%;
}

.list-wrapper {
  overflow-y: auto;
  height: calc(100% - 60px);
}

.item {
  border-radius: 4px;
  height: 72px;
  width: 100%;
  color: #33383e;
  align-items: center;
  display: flex;
  cursor: pointer;
  margin-top: 10px;
  background-color: #f6f7f9;
  padding-left: 12px;
}

.item h3 {
  font-size: 14px;
  line-height: 18px;
  font-weight: 600;
  margin-bottom: 6px;
  margin-top: 0;
  color: rgba(0, 0, 0, 0.85);
}

.item-desc p {
  color: #7f8792;
  font-size: 12px;
  line-height: 18px;
  padding: 0;
}

.cover-del {
  position: absolute;
  z-index: 100;
  bottom: 0;
  right: 0;
  background: var(--huocms-com-color-primary);
  color: #fff;
  font-size: 12px;
  padding: 3px;
  display: none;
}

.cover_img {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
}

.free-poster-tools {
  overflow: auto;
  width: 260px;

  ::v-deep {
    .el-tabs__nav-scroll {
      display: flex;
      justify-content: center;
    }

    .el-input__inner {
      background-color: #f2f3f5;
      border-color: #f2f3f5;
    }
  }
}

.free-poster-tools .el-form-item__label {
  padding: 0;
  font-size: 12px;
}

.free-poster-tools .el-form-item {
  margin-bottom: 15px;
}

#tab-base_setting {
  padding-left: 20px;
}

#tab-data {
  padding-left: 20px;
}

.free-poster-tools .el-input__inner {
  height: 32px;
  line-height: 32px;
  padding-left: 0;
  padding-right: 0;
}

.free-poster-tools .el-form-item__label {
  line-height: 28px;
}

.free-poster-tools .el-input-number.is-controls-right .el-input-number__decrease,
.el-input-number.is-controls-right .el-input-number__increase {
  line-height: 16px;
}

.free-poster-tools .el-input-number {
  line-height: 32px;
}

.list-wrapper .el-upload--picture-card {
  width: 120px;
  height: 210px;
  cursor: pointer;
  line-height: 210px;
  margin: 4px;
}

.list-wrapper .el-upload-list--picture-card .el-upload-list__item {
  width: 120px;
  display: inline-block;
  margin: 4px;
  border-radius: 4px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  border: 1px solid #e0e5ea;
  max-height: 210px;
  height: 210px;
}
</style>
